<template>
    <!-- 区域管理设置page -->
    <div class="admin2-list">
        <div style="padding: 10px;">
            <el-button  @click="dialogVisible = true" type="info " size="large" v-if="rule==='region-admin'">添加新闻</el-button>
        </div>
        
        <div style="width: 70vw;">
            <el-descriptions
                title="新闻列表"
                direction="vertical"
                :column="5"
                border
            >
                <view v-for="item,index in addrManaList" :key="index">
                    <view  v-if="index==0">
                        <el-descriptions-item>
                            <img style="width: 50px;height: 40px;" :src="'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/'+item.picture" alt=""/>
                        </el-descriptions-item>
                        <el-descriptions-item label="主题">{{ item.theme }}</el-descriptions-item>
                        <el-descriptions-item label="描述">{{ item.content }}</el-descriptions-item>
                        <el-descriptions-item label="发布时间">{{ item.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="操作">
                            <el-button type="danger" style="margin-left: 16px" @click="del(item.id)">删除</el-button>
                        </el-descriptions-item>
                    </view>
                    <view v-else>
                        <el-descriptions-item>
                            <img style="width: 50px;height: 40px;" :src="'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/'+item.picture" alt=""/>
                        </el-descriptions-item>
                        <el-descriptions-item>{{ item.theme }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.content }}</el-descriptions-item>
                        <el-descriptions-item>{{ item.createTime }}</el-descriptions-item>
                        <el-descriptions-item>
                            <el-button type="danger" style="margin-left: 16px"  @click="del(item.id)">删除</el-button>
                        </el-descriptions-item>
                    </view>
                </view>
            </el-descriptions>
        </div>
        <!-- 分页 -->
        <div>
            <el-pagination background
             layout="prev, pager, next" 
             :total="Math.ceil(total/5)*10"
             :current-page="current"
             @current-change="currentPage"
             />
        </div>
        <!-- 添加拟态框 -->
        <el-dialog
            v-model="dialogVisible"
            title="添加区域"
            :before-close="onClose"
        >
        <!--  -->
        <form class="insForm">
            <!-- 隐藏框 -->
            <input type="hidden" name="id" value=""/>
            <div>
                <label for="avatar">主图：</label>
                <input type="file" id="avatar" name="file">
            </div>
            <div>
                <label for="theme">主题</label>
                <input type="text" id="theme" name="theme">
            </div>
            <div>
                <label for="content">描述：</label>
                <input type="text" id="content" name="content">
            </div>
            <div>
                <el-button type="primary" @click="ins">添加</el-button>
            </div>
        </form>
        </el-dialog>
    </div>
</template>
<script>
import newsManagement from '@/api/NewsManagement';

export default{
    data(){
        return{
            rule:null,
            dialogVisible:false,
            addrManaList:[],
            current:0,
            hasNext: false,
            hasPrevious:true,
            size:0,
            total:0,
            upData:{
                id:0,
                theme:'',
                content:''
            },
            admin2List:[],
        }
    },
    methods:{
        del(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                newsManagement.del(
                    id
                ).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.initPage(this.current,5)
                    }else{
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    }
                }) 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 添加
        ins(){
            var form=document.querySelector('.insForm')
            var formData=new FormData(form)
            newsManagement.ins(formData).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.initPage(this.current,4)
                }else{
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    });
               }
            })
        },

        // 当前页面
        currentPage(newPage){
            this.current = newPage;
            this.initPage(this.current,4)
        },
        // 初始化
        initPage(pageNum,pageSize){
            var formdata=new FormData()
            formdata.append('pageNum',pageNum)
            formdata.append('pageSize',pageSize)
            newsManagement.findList(
                formdata
            ).then((res)=>{
                console.log(res)
                this.addrManaList = res.data.records;
                this.current = res.data.current;
                this.hasNext = res.data.hasNext;
                this.hasPrevious = res.data.hasPrevious;
                this.size = res.data.size;
                this.total = res.data.total;
          })
        },
    },
    mounted() {
        this.rule=localStorage.getItem('rule')
        console.log(localStorage.getItem('token'))
        this.initPage(1,4);
    }

}

</script>
<style lang="scss">
.admin2-list{
    form {
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    div {
        margin-bottom: 15px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input[type="file"],
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type="file"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    }
</style>